@import "@/common/constants/StyleConst.scss";

.chatsRecords-container {
  :deep .v-list-item {
    margin-bottom: 12px;

    padding: 0 8px;
    min-height: unset;

    &.self {
      .v-list-item__content {
        background-color: #556282;
        color: $color-text-white;
      }

      .subtitle {
        color: $color-text-white;

        .read-icon {
          color: $color-text-white;
        }
      }
    }

    .v-list-item__content {
      flex: unset;
      align-self: start;
      background-color: $color-theme-lightgrey;
      border-radius: 15px;
      color: #252525;
      padding: 8px 12px;
      word-break: break-all;

      .chats-text {
        text-overflow: unset;
        overflow: unset;
        white-space: unset;
        font-size: 14px;
      }

      .subtitle {
        font-size: 7px;

        .read-icon {
          color: inherit;
          font-size: 8px;
          margin-left: 4px;

          &::before {
            font-weight: bold;

          }
        }
      }
    }

    .avatar.v-list-item__avatar {
      margin: 0 8px;
      align-self: start;
    }
  }

  .message-warp {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;

    .send-btn {
      width: 32px;
      height: 32px;

      .send-icon {
        transform: rotate(-45deg);
        color: $color-text-white;
        font-size: 16px;
      }
    }
  }
}